<template>
    <ElDialog v-model="dialogVisible" width="600px" :title="title">
        <el-form ref="formRef" :model="validateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="公司名称" prop="age" :rules="{ required: true, message: '请输入公司名称' }">
                <el-input v-model="validateForm.age" type="text" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="信用编码" prop="age" :rules="{ required: true, message: '请输入信用编码' }">
                <el-input v-model="validateForm.age" type="text" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="单价" prop="age" :rules="{ required: true, message: '请输入单价' }">
                <el-input v-model="validateForm.age" type="text" placeholder="0.0000(元，角，分，厘，毫)"/>
            </el-form-item>
            <el-form-item label="价格说明" prop="age">
                <el-input v-model="validateForm.age" :rows="2" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="数据涵盖" prop="age" :rules="{ required: true, message: '请选择数据涵盖' }">
                <el-checkbox-group v-model="validateForm.checkList">
                    <el-checkbox label="企业数据" />
                    <el-checkbox label="抖音数据" />
                    <el-checkbox label="京东数据" />
                    <el-checkbox label="淘宝数据" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="优先级" prop="age" :rules="[{ required: true, message: '请输入优先级' },{ type: 'number', message: '请输入数字' }]">
                <el-input v-model.number="validateForm.age" type="text" placeholder="请输入优先级；数字越大，优先级越高"/>
            </el-form-item>
            <el-form-item label="联系人" prop="age" :rules="{ required: true, message: '请输入联系人' }">
                <el-input v-model="validateForm.age" type="text" placeholder="请输入联系人"/>
            </el-form-item>
            <el-form-item label="联系电话" prop="age" :rules="{ required: true, message: '请输入联系电话' }">
                <el-input v-model="validateForm.age" type="text" placeholder="请输入联系电话"/>
            </el-form-item>
            <el-form-item label="状态" prop="age" :rules="{ required: true, message: '请选择状态' }">
                <el-radio-group v-model="validateForm.age" class="ml-4">
                    <el-radio label="1">启用</el-radio>
                    <el-radio label="2">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="age">
                <el-input v-model="validateForm.age" :rows="2" type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <ElButton @click="dialogVisible = false">取消</ElButton>
                <ElButton type="primary" @click="submitForm(formRef)">确定</ElButton>
            </span>
        </template>
    </ElDialog>
</template>
<script setup>
import {ElDialog, ElButton, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox} from 'element-plus'
import { computed, ref, reactive, onMounted } from 'vue';
const props = defineProps(['modelValue', 'type', 'info'])
const emit = defineEmits(['update:modelValue'])
const formRef = ref()

const validateForm = reactive({
  age: '',
})
const dialogVisible = computed({
    set:(val) => {
        emit('update:modelValue', val)
    },
    get:() => {
        return props.modelValue
    }
})
const title = computed(() => {
    let obj = {add: '新增',edit: '编辑' }
    return obj[props.type]
})
// 提交
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 获取详情
const getDetail = () => {}
onMounted(() => {
    if(props.type === 'edit') {getDetail()}
})
</script>